* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(100deg,#abbaab,#fff);
}

.contain {
  display: flex;
  padding: 0.833rem 0.833rem 0;
  .left {
    flex: 1;
    color: #3b4249;
    font-size: 0.833rem;
    .inp {
      white-space: nowrap;
    }
    .inp .item {
      width: 10.417rem;
      height: 2.083rem;
      margin-left: 0.417rem;
      outline: none;
      border: 1px solid #ccc;
      border-radius: 0.208rem;
      vertical-align: middle;
      padding-left: 0.417rem;
      font-size: 0.75rem;
    }
    .inp input:last-child {
      width: 4.167rem;
      height: 2rem;
      background-color: #237b9e;
      vertical-align: middle;
      border-radius: 0.208rem;
      font-size: 0.833rem;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  
    table {
      margin-top: 1.042rem;
      border: 1px solid rgb(227, 241, 27);
      border-radius: 0.208rem;
      border-spacing: 0rem;
      text-align: center;
      background: linear-gradient(100deg,#b6eff7,rgb(228, 162, 245));
      tr {
        td,th {
        width: 14.167rem;
        height: 2rem;
        border-right: 1px solid rgb(227, 241, 27);
        border-bottom: 1px solid rgb(227, 241, 27);
        &:last-child {
        border-right: none;
         }
        }
        &:last-child {
          td {
            border-bottom: none;
          }
        }
      }  
    }
  }
  .right {
    width: 32.083rem;
    margin-left: 2.083rem;
    display: none;
    .top {
      margin-bottom: 1.25rem;
    }
      h3 {
        margin-bottom: 0.833rem;
      }
      .table {
        width: 29.167rem;
        height: 16.667rem;
      }
  }
}